// 分类导航，数据渲染
// 获取元素
const classifyNav = document.querySelector(".classify-nav");
// 模拟后台传来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]

for (let i = 0; i < apiTypeData.length; i++) {
    // console.log("aaa")
    // // 把数据添加到指定父元素里
    classifyNav.innerHTML += `
    <span>${apiTypeData[i].name}</span>
    `
}
for (let i = 0; i < apiTypeData.length; i++) {
    if (apiTypeData.length - i <= 2) {//末尾又几个新加入的就写几
        // 把新加入的进行重标记
        classifyNav.getElementsByTagName("span")[i].style.fontWeight = 700;
    }
};
// 设置选项的点击效果，并和搜索框进行关联
// 获取元素
const seekSpan = document.querySelector(".seeks span");
const seekTxt = document.querySelector(".seek-txt");
// 默认第一个是变色的
classifyNav.getElementsByTagName("span")[0].style.color = "rgb(0,189,255)";
classifyNav.getElementsByTagName("span")[0].style.border = "1px solid rgb(0,189,255)";
seekTxt.value=`${apiTypeData[0].keyword}`;
for (let i = 0; i < classifyNav.getElementsByTagName("span").length; i++) {
    // 给选项添加点击变色事件
    classifyNav.getElementsByTagName("span")[i].addEventListener("click", function () {
        // 先把所有有选项的样式设为初始值
        for (let j = 0; j < classifyNav.getElementsByTagName("span").length; j++) {
            seekSpan.innerHTML = `${classifyNav.getElementsByTagName("span")[i].innerHTML}`;
            classifyNav.getElementsByTagName("span")[j].style.color = "rgb(102,102,102)";
            classifyNav.getElementsByTagName("span")[j].style.border = "1px solid rgb(102,102,102)";
        }
        // 再给点击的选项修改样式
        classifyNav.getElementsByTagName("span")[i].style.color = "rgb(0,189,255)";
        classifyNav.getElementsByTagName("span")[i].style.border = "1px solid rgb(0,189,255)";
        seekTxt.value=`${apiTypeData[i].keyword}`;
    })
}
// ======================================================================================================
//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "./imge/images/API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "./imge/images/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "./imge/images/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "./imge/images/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "./imge/images/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "./imge/images/API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "./imge/images/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "./imge/images/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "./imge/images/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "./imge/images/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "./imge/images/API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "./imge/images/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "./imge/images/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "./imge/images/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "./imge/images/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "./imge/images/API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "./imge/images/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "./imge/images/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "./imge/images/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "./imge/images/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
  ];
//   获取元素

const uls = document.querySelector(".body-nav ul");
for(let i=0;i<listDataArr.length;i++){
    uls.innerHTML+=`
    <li>
    <div class="body-nav-en">企业专用</div>
    <img src="${listDataArr[i].img}" alt="">
    <p>${listDataArr[i].name}</p>
    <span>${listDataArr[i].price}</span>
    <div class="body-nav-af">马上申请</div>
    </li>
    `
}
// 获取价格所在的标签
const spans = document.querySelectorAll(".body-nav li>span");
const bodyNavEn = document.querySelectorAll(".body-nav-en");
for(let i=0;i<spans.length;i++){
    // console.log(spans[i].innerHTML)
 if(spans[i].innerHTML.charAt(0)=="￥"){
    spans[i].style.color="red";
    bodyNavEn[i].style.display="block";
 }
    
}